.font-height {
  height: 40px;
  line-height: 40px;
}

.hover {
  color: #fff;
  background-color: #ff4500;
}

.Home {
  width: 100%;
  margin-top: 20px;
  display: flex;

  position: relative;

  .sidebar-left {
    width: 100px;
    max-height: 100vh;

    .menu {
      width: 100%;
      list-style: none;
      text-align: center;
      box-shadow: 0 5px 10px #d4d4d4;

      .item {
        .font-height();

        &:hover {
          cursor: pointer;
          .hover()
        }
      }

      .active {
        .hover()
      }
    }

    .top {
      width: 45px;
      height: 45px;
      margin: 20px auto;
      border: 1px solid #7f828b;
      border-radius: 50%;
      display: block;
      background: none;
      color: #7f828b;

      .iconfont {
        font-size: 26px;
        line-height: 45px;
      }

      &:hover {
        color: #1e90ff;
        border-color: #1e90ff;
      }
    }
  }

  .main {
    width: 625px;
    min-height: 200px;
    padding: 0 20px;
    margin-top: 0;
    box-sizing: border-box;
    flex-grow: 1;
  }

  .swiper {
    width: 275px;
    height: 275px;
    box-shadow: 0 5px 10px #d4d4d4;

    .swiper-slide {
      width: 275px;
      height: 275px;
    }
  }
}

.fixed {
  >.sidebar-left {
    position: sticky;
    top: 10px;
    z-index: 20;
  }

  .main {
    // margin-left: 100px;
  }

  >.swiper {
    position: sticky;
    top: 10px;
    // left: 865px;
    z-index: 10;
  }
}